<div class="container-fluid">
    <div class="row ikg-row">
        <div class="col-lg-3 ikg-col">
            <div id="treeBar" class="panel-default panel ikg-panel ikg-page-panel-no-search">
                <div class="panel-heading ikg-panel-heading">
                    <h3 class="panel-title ikg-panel-title">
                        <i class="fa fa-outdent" aria-hidden="true"></i>&nbsp;&nbsp;功能菜单树
                    </h3>
                </div>
                <div class="panel-body ikg-panel-body">
                    <div data-bind="jsTreeView:treeViewModel">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-9 ikg-col">
            <!-- 工具栏 -->
            <div class="row ikg-row">
                <div class="col-sm-12 ikg-col">
                    <div id="toolbar" class="btn-group">
                        <button type="button" class="btn btn-success btn-sm" data-bind="click:fnAdd">
                            <i class="fa fa-plus fa-lg" aria-hidden="true"></i><span
                                class="hidden-sm hidden-xs"> 新增</span>
                        </button>
                        <button type="button" class="btn btn-success btn-sm" data-bind="click:fnRemove">
                            <i class="fa fa-trash fa-lg" aria-hidden="true"></i><span
                                class="hidden-sm hidden-xs"> 删除</span>
                        </button>
                        <button type="button" class="btn btn-success btn-sm" data-bind="click:fnEdit">
                            <i class="fa fa-pencil-square-o fa-lg" aria-hidden="true"></i><span
                                class="hidden-sm hidden-xs"> 编辑</span>
                        </button>
                        <button type="button" class="btn btn-success btn-sm" data-bind="click:fnView">
                            <i class="fa fa-file-text fa-lg" aria-hidden="true"></i><span class="hidden-sm hidden-xs"> 查看</span>
                        </button>
                        <button type="button" class="btn btn-success btn-sm" data-bind="click:fnMove">
                            <i class="fa fa-send fa-lg" aria-hidden="true"></i><span
                                class="hidden-sm hidden-xs"> 迁移</span>
                        </button>
                    </div>
                </div>
            </div>
            <!-- 列表 -->
            <div class="row ikg-row">
                <div class="col-sm-12 ikg-col">
                    <table data-bind="tableView:tableViewModel"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="menuDialog" class="modal hide" tabindex="-1" role="dialog"
     data-bind="template:{name:'menuModalTemplate',data:menuViewModel},ikgModal:{ backdrop: 'static', keyboard: false, show: modalVisible}"></div>

<div id="moveDialog" class="modal hide" tabindex="-1" role="dialog"
     data-bind="template:{name:'moveTreeTemplate',data:moveTreeViewModel},ikgModal:{ backdrop: 'static', keyboard: false, show: treeModalVisible}"></div>
<!--inside template-->
<script type="text/html" id="menuModalTemplate">
    <div class="modal-dialog" style="width: 500px" role="document">
        <div class="modal-content">
            <!-- header -->
            <div class="modal-header ikg-modal-header" id="modalHeader">
                <button type="button" class="close ikg-close" data-bind="click: close">&times;</button>
                <span class="modal-title ikg-modal-title" data-bind="text:title"></span>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="detailForm" autocomplete="off">
                    <div class="form-group">
                        <label for="menuName" class="col-sm-3 control-label">菜单名称</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="menuName" id="menuName" placeholder="*,必填"
                                   data-bind="value:menuName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="menuCode" class="col-sm-3 control-label">快速启动代码</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="menuCode" id="menuCode" placeholder="*,选填"
                                   data-bind="value:menuCode">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="menuUri" class="col-sm-3 control-label">链接地址</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="menuUri" id="menuUri"
                                   data-bind="value:menuUri">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="templateUri" class="col-sm-3 control-label">模板地址</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="templateUri" id="templateUri"
                                   data-bind="value:templateUri">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="scriptUri" class="col-sm-3 control-label">脚本地址</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="scriptUri" id="scriptUri"
                                   data-bind="value:scriptUri">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="iconCls" class="col-sm-3 control-label">图标样式</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="iconCls" id="iconCls"
                                   data-bind="value:iconCls">
                        </div>
                    </div>
                    <!-- 默认基本信息 -->
                    <div style="display: none">
                        <input type="text" data-bind="value:menuId">
                        <input type="text" data-bind="value:editStatus">
                        <input type="text" data-bind="value:recordStatus">
                        <input type="text" data-bind="value:pMenuId">
                    </div>
                </form>
            </div>
            <div class="modal-footer" id="modalFooter">
                <button type="button" class="btn btn-success ikg-btn-12" data-bind="click:save,visible:enabled">
                    <i class="fa fa-save"></i> 保存
                </button>
                <button type="button" class="btn btn-default ikg-btn-12" data-bind="click:close">
                    <i class="fa fa-close"></i> 关闭
                </button>
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="moveTreeTemplate">
    <div class="modal-dialog" style="width: 400px;height: 360px;" role="document">
        <div class="modal-content">
            <div class="modal-header ikg-modal-header">
                <button type="button" class="close ikg-close" data-bind="click: close">&times;</button>
                <span class="modal-title ikg-modal-title" data-bind="text:title"></span>
            </div>
            <div class="modal-body">
                <div id="targetTree">
                    <div class="loading">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success ikg-btn-12" data-bind="click:confirm">
                    <i class="fa fa-check"></i> 确认
                </button>
                <button type="button" class="btn btn-default ikg-btn-12" data-bind="click:close">
                    <i class="fa fa-close"></i> 取消
                </button>
            </div>
        </div>
    </div>
</script>